/<template>
  <div>
    <n-row gutter="12">
      <n-col :span="6">
        <div class="light-green">
          <n-data-table
            :columns="columns"
            :data="data"
            :pagination="pagination"
            :bordered="false"
          />
          <!-- 修改弹出框 -->
          <n-modal
            v-model:show="showModal"
            :mask-closable="false"
            preset="dialog"
            title="确认"
            content="你确认"
            positive-text="确认"
            negative-text="取消"
            @positive-click="onPositiveClick"
            @negative-click="onNegativeClick"
            :on-after-leave="modelCloseClear"
          >
            <n-form
              ref="formRef"
              :model="ctc"
              :rules="rules"
              :size="size"
              label-placement="top"
            >
              <n-grid :cols="24" :x-gap="24">
                <n-form-item-gi :span="12" label="id" path="id">
                  <n-input v-model:value="ctc.id" placeholder="请输入" @keydown.enter.prevent />
                </n-form-item-gi>
                <n-form-item-gi :span="12" label="name" path="name">
                  <n-input v-model:value="ctc.name" placeholder="请输入" @keydown.enter.prevent/>
                </n-form-item-gi>
              </n-grid>
            </n-form>
          </n-modal>
        </div>
      </n-col>
      <n-col :span="6">
        <div class="green">
          <!-- from表单 -->
          <n-form
            ref="formRef"
            :model="ctc"
            :rules="rules"
            :size="size"
            label-placement="top"
          >
            <n-grid :cols="24" :x-gap="24">
              <n-form-item-gi :span="12" label="id" path="id">
                <n-input v-model:value="ctc.id" placeholder="请输入" />
              </n-form-item-gi>
              <n-form-item-gi :span="12" label="name" path="id">
                <n-input v-model:value="ctc.name" placeholder="请输入" />
              </n-form-item-gi>
            </n-grid>
          </n-form>
          <n-gi :span="24">
            <!-- 验证 -->
            <div style="display: flex; justify-content: flex-end">
              <n-button round type="primary" @click="handleValidateCtc">
                验证
              </n-button>
            </div>
          </n-gi>
          <n-gi :span="24">
            <!-- 删除 -->
            <n-modal
              v-model:show="showModalDelete"
              preset="dialog"
              title="确认"
              content="你确认?"
              positive-text="确认"
              negative-text="算了"
              @positive-click="submitCtc"
              @negative-click="cancelCtc"
            >
              <!-- from表单 -->
              <n-form
                ref="formRef"
                :model="ctc"
                :rules="rules"
                :size="size"
                label-placement="top"
                :disabled="updateDisabled"
              >
                <n-grid :cols="24" :x-gap="24">
                  <n-form-item-gi :span="12" label="id" path="id">
                    <n-input v-model:value="ctc.id" placeholder="请输入" />
                  </n-form-item-gi>
                  <n-form-item-gi :span="12" label="name" path="id">
                    <n-input v-model:value="ctc.name" placeholder="请输入" />
                  </n-form-item-gi>
                </n-grid>
              </n-form>
            </n-modal>
          </n-gi>
          <!-- 新增 -->
          <n-gi :span="24">
            <n-grid-item>
              <div class="light-green">
                <n-button type="success" @click="addCtc"> ctc新增 </n-button>
              </div>
            </n-grid-item>
          </n-gi>
        </div>
      </n-col>
    </n-row>
  </div>
</template>
<script>
import { h, defineComponent, ref } from "vue";
import {
  NButton,
  createDiscreteApi,
  NDataTable,
  NModal,
  NRow,
  NCol,
  NInput,
  NGrid,
  NFormItemGi,
  NForm,
} from "naive-ui";

const createColumns = ({ updateCtc, deletCtc }) => {
  return [
    {
      title: "id",
      key: "id",
    },
    {
      title: "name",
      key: "name",
    },
    {
      title: "Length",
      key: "length",
    },
    {
      title: "Action",
      key: "actions",
      render(row) {
        return [
          h(
            NButton,
            {
              strong: true,
              tertiary: true,
              size: "small",
              onClick: () => updateCtc(row),
            },
            { default: () => "修改" }
          ),
          h(
            NButton,
            {
              strong: true,
              tertiary: true,
              size: "small",
              onClick: () => deletCtc(row),
            },
            { default: () => "删除" }
          ),
        ];
      },
    },
  ];
};

const data = [
  { id: 3, name: "Wonderwall" },
  { id: 4, name: "Don't Look Back in Anger" },
];

export default defineComponent({
  components: {
    NDataTable,
    createDiscreteApi,
    NButton,
    NModal,
    NRow,
    NCol,
    NInput,
    NGrid,
    NFormItemGi,
    NForm,
  },
  setup() {
    const message = createDiscreteApi(["message"]).message;
    // 添加按钮
    const showModalRef = ref(false);
    // 表单按钮
    const formRef = ref({
      id: null,
      name: null,
    });
    // 删除按钮
    const showModalRefDelete = ref(false);
    const deletCtcFromData = ref(null);
    const rules = {
        id: {
          required: true,
          trigger: ["blur", "input"],
          message: "请输入 我需要的值",
        },
        name: {
          required: true,
          validator(rule, value) {
            if (!/^[\u4E00-\u9FA5]+$/.test(value)) {
              return new Error("请输入汉字");
            } 
            return true;
          },
          trigger: ["blur", "input"],
        },
      };
    return {
      // 禁用按钮
      updateDisabled: ref(true),
      // 删除按钮
      showModalDelete: showModalRefDelete,
      size: ref("medium"),
      // 禁用
      ctc: formRef,
      // 验证输入参数
      rules,
      // ctc 弹出框
      showModal: showModalRef,
      // 取消
      onNegativeClick() {
        message.success("Cancel");
        showModalRef.value = false;
      },
      // 成功
      onPositiveClick(e) {
        e.preventDefault();
        formRef.value?.validate((errors) => {
          if (!errors) {
            message.success("验证成功");
          } else {
            console.log(errors);
            message.error("验证失败");
          }
        });
        message.success("Submit");
        showModalRef.value = false;
        console.log(formRef.value, "提交参数");
      },
      data,
      // 添加和删除
      columns: createColumns({
        // 修改
        updateCtc(row) {
          showModalRef.value = true;
          formRef.value = row;
        },
        // 删除
        deletCtc(row) {
          formRef.value = row;
          showModalRefDelete.value = true;
          deletCtcFromData.value = row;
        },
      }),
      // 验证e
      handleValidateCtc(e) {
        e.preventDefault();
        formRef.value?.validate((errors) => {
          if (!errors) {
            message.success("验证成功");
          } else {
            console.log(errors);
            message.error("验证失败");
          }
        });
      },
      pagination: false,
      // 确认删除按钮
      submitCtc() {
        console.log(deletCtcFromData.value.id, "删除");
        showModalRefDelete.value = false;
      },
      // 删除取消按钮
      cancelCtc() {
        showModalRefDelete.value = false;
      },
      // 清空回调按钮
      modelCloseClear() {
        console.log("测试");
        formRef.value = {};
      },
      // 添加按钮
      addCtc() {
        showModalRef.value = true;
      },
    };
  },
});
</script>
<style scoped>
.light-green {
  height: 108px;
  background-color: rgba(0, 128, 0, 0.12);
}
.green {
  height: 108px;
  background-color: rgba(0, 128, 0, 0.24);
}
</style>